<template>
  <div>
    <p class="title">推荐歌单</p>
    <van-row gutter="5">
      <van-col span="8" v-for="val in list" :key="val.id">
        <van-image width="100%" fit="cover" :src="val.picUrl" />
        <p class="song_name">{{val.name}}</p>
      </van-col>
    </van-row>
    <p class="title">最新音乐</p>
    <div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
        <van-cell v-for="item in list2" :key="item.id">
          <!-- <template>
            <div class="song_item_wrap">
              <div class="song_left">
                <p>{{item.name}}</p>
                <p>
                  <span>{{item.song.artists[0].name}} -</span>
                  <span>{{item.song.album.name}}</span>
                </p>
              </div>
              <div class="song_right">
                <i class="iconfont icon-bofang"></i>
              </div>
            </div>
          </template>-->
          <fuyong :name="item.name" :a_name="item.song.album.name">
            <span>{{item.song.artists[0].name}} -</span>
          </fuyong>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import fuyong from "../components/fuyong";
import { tjgdapi, tjyyapi } from "../api/index";
export default {
  components: {
    fuyong,
  },
  data() {
    return {
      list: [],
      list2: [],
      loading: false,
      finished: false,
    };
  },
  async created() {
    const res = await tjgdapi();
    // console.log(res);
    this.list = res.data.result;
    const res2 = await tjyyapi();
    // console.log(res2);
    this.list2 = res2.data.result;
    this.finished = true;
  },
};
</script>

<style scoped>
.title {
  padding: 0.266667rem 0.24rem;
  margin: 0 0 0.24rem 0;
  background-color: #eee;
  color: #333;
  font-size: 15px;
}
.song_name {
  font-size: 0.346667rem;
  padding: 0 0.08rem;
}
</style>